<template>
    <div class="canvas-container">
    <canvas ref="canvas" @mousemove="handleCanvasMouseMove" @mouseleave="handleCanvasMouseLeave"></canvas>
    <el-popover
      ref="popover"
      placement="top"
      width="230"
      v-model="popover.visible"
      :style="popover.style">
      <p>{{ popover.content }}</p>
    </el-popover>
  </div>
</template>

<script>


export default {
    components: {

    },
    props: {
        data: Object
    },
    data() {
        return {
            rects: [
                { x: 70, y: 35, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "A 进料 "+this.data.param2.xmeas1+" km^3/h"},
                { x: 70, y: 81, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "D 进料 "+this.data.param2.xmeas2+" kg/h"},
                { x: 70, y: 127, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "E 进料 "+this.data.param2.xmeas3+" kg/h"},
                { x: 65, y: 230, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 A（采样间隔6min）"+this.data.param2.xmeas23+""},
                { x: 65, y: 254, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 B（采样间隔6min）"+this.data.param2.xmeas24+""},
                { x: 65, y: 276, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 C（采样间隔6min）"+this.data.param2.xmeas25+""},
                { x: 65, y: 300, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 D（采样间隔6min）"+this.data.param2.xmeas26+""},
                { x: 65, y: 322 , width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 E（采样间隔6min）"+this.data.param2.xmeas27+""},
                { x: 65, y: 345, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 F（采样间隔6min）"+this.data.param2.xmeas28+""},
                { x: 70, y: 510, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "总进料 "+this.data.param2.xmeas4+" km^3/h"},


                { x: 185, y: 420, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器进料速度 "+this.data.param2.xmeas6+" km^3/h"},


                { x: 210, y: 240, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器压力 "+this.data.param2.xmeas7+" kPa"},


                // { x: 238, y: 185, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "搅拌速度 "+this.data.param2.xmv12+""},


                { x: 285, y: 212, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器等级 "+this.data.param2.xmeas8+" %"},
                { x: 272, y: 424, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器温度 "+this.data.param2.xmeas9+" ℃"},
                { x: 313, y: 413, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器冷却水出口温度 "+this.data.param2.xmeas21+" ℃"},


                { x: 378, y: 185, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "分离器冷却水出口温度 "+this.data.param2.xmeas22+" ℃"},


                { x: 508, y: 260, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器等级 "+this.data.param2.xmeas15+" %"},
                { x: 539, y: 27, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "再循环流量 "+this.data.param2.xmeas5+" km^3/h"},
                { x: 545, y: 230, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器压力 "+this.data.param2.xmeas16+" kPa"},
                { x: 560, y: 360, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器温度 "+this.data.param2.xmeas18+" ℃"},
                { x: 612, y: 293, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器塔底低流量 "+this.data.param2.xmeas14+" m^3/h"},


                { x: 647, y: 229, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器温度 "+this.data.param2.xmeas11+" ℃"},
                { x: 677, y: 154, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器液位 "+this.data.param2.xmeas12+" %"},
                { x: 710, y: 127, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器压力 "+this.data.param2.xmeas13+" kPa"},
                { x: 703, y: 56, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "排放速度 "+this.data.param2.xmeas10+" km^3/h"},
                { x: 660, y: 430, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器流量 "+this.data.param2.xmeas19+" kg/h"},
                { x: 672, y: 517, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器塔底流量  "+this.data.param2.xmeas17+" m^3/h"},



                { x: 790, y: 120, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 A（采样间隔6min）"+this.data.param2.xmeas29+""},
                { x: 790, y: 143, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 B（采样间隔6min）"+this.data.param2.xmeas30+""},
                { x: 790, y: 165, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 C（采样间隔6min）"+this.data.param2.xmeas31+""},
                { x: 790, y: 188, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 D（采样间隔6min）"+this.data.param2.xmeas32+""},
                { x: 790, y: 211, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 E（采样间隔6min）"+this.data.param2.xmeas33+""},
                { x: 790, y: 234, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 F（采样间隔6min）"+this.data.param2.xmeas34+""},
                { x: 790, y: 254, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 G（采样间隔6min）"+this.data.param2.xmeas35+""},
                { x: 790, y: 277, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 H（采样间隔6min）"+this.data.param2.xmeas36+""},
                { x: 790, y: 370, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 D（采样间隔15min）"+this.data.param2.xmeas37+""},
                { x: 790, y: 394, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 E（采样间隔15min）"+this.data.param2.xmeas38+""},
                { x: 790, y: 416, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 F（采样间隔15min）"+this.data.param2.xmeas39+""},
                { x: 790, y: 440, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 G（采样间隔15min）"+this.data.param2.xmeas40+""},
                { x: 790, y: 463, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 H（采样间隔15min）"+this.data.param2.xmeas41+""},
            ],
            popover: {
                visible: false,
                content: '',
                style: {
                    position: 'absolute',
                    display: 'none'
                }
            }
        };
    },
    mounted() {
        this.drawRects();
        this.intervalId = setInterval(() => {
            this.rects = [
                { x: 70, y: 35, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "A 进料 "+this.data.param2.xmeas1+" km^3/h"},
                { x: 70, y: 81, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "D 进料 "+this.data.param2.xmeas2+" kg/h"},
                { x: 70, y: 127, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "E 进料 "+this.data.param2.xmeas3+" kg/h"},
                { x: 65, y: 230, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 A（采样间隔6min）"+this.data.param2.xmeas23+""},
                { x: 65, y: 254, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 B（采样间隔6min）"+this.data.param2.xmeas24+""},
                { x: 65, y: 276, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 C（采样间隔6min）"+this.data.param2.xmeas25+""},
                { x: 65, y: 300, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 D（采样间隔6min）"+this.data.param2.xmeas26+""},
                { x: 65, y: 322 , width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 E（采样间隔6min）"+this.data.param2.xmeas27+""},
                { x: 65, y: 345, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 F（采样间隔6min）"+this.data.param2.xmeas28+""},
                { x: 70, y: 510, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "总进料 "+this.data.param2.xmeas4+" km^3/h"},


                { x: 185, y: 420, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器进料速度 "+this.data.param2.xmeas6+" km^3/h"},


                { x: 210, y: 240, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器压力 "+this.data.param2.xmeas7+" kPa"},


                // { x: 238, y: 185, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "搅拌速度 "+this.data.param2.xmv12+""},


                { x: 285, y: 212, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器等级 "+this.data.param2.xmeas8+" %"},
                { x: 272, y: 424, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器温度 "+this.data.param2.xmeas9+" ℃"},
                { x: 313, y: 413, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "反应器冷却水出口温度 "+this.data.param2.xmeas21+" ℃"},


                { x: 378, y: 185, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "分离器冷却水出口温度 "+this.data.param2.xmeas22+" ℃"},


                { x: 508, y: 260, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器等级 "+this.data.param2.xmeas15+" %"},
                { x: 539, y: 27, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "再循环流量 "+this.data.param2.xmeas5+" km^3/h"},
                { x: 545, y: 230, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器压力 "+this.data.param2.xmeas16+" kPa"},
                { x: 560, y: 360, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器温度 "+this.data.param2.xmeas18+" ℃"},
                { x: 612, y: 293, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器塔底低流量 "+this.data.param2.xmeas14+" m^3/h"},


                { x: 647, y: 229, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器温度 "+this.data.param2.xmeas11+" ℃"},
                { x: 677, y: 154, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器液位 "+this.data.param2.xmeas12+" %"},
                { x: 710, y: 127, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "产品分离器压力 "+this.data.param2.xmeas13+" kPa"},
                { x: 703, y: 56, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "排放速度 "+this.data.param2.xmeas10+" km^3/h"},
                { x: 660, y: 430, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器流量 "+this.data.param2.xmeas19+" kg/h"},
                { x: 672, y: 517, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "汽提器塔底流量  "+this.data.param2.xmeas17+" m^3/h"},



                { x: 790, y: 120, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 A（采样间隔6min）"+this.data.param2.xmeas29+""},
                { x: 790, y: 143, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 B（采样间隔6min）"+this.data.param2.xmeas30+""},
                { x: 790, y: 165, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 C（采样间隔6min）"+this.data.param2.xmeas31+""},
                { x: 790, y: 188, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 D（采样间隔6min）"+this.data.param2.xmeas32+""},
                { x: 790, y: 211, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 E（采样间隔6min）"+this.data.param2.xmeas33+""},
                { x: 790, y: 234, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 F（采样间隔6min）"+this.data.param2.xmeas34+""},
                { x: 790, y: 254, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 G（采样间隔6min）"+this.data.param2.xmeas35+""},
                { x: 790, y: 277, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 H（采样间隔6min）"+this.data.param2.xmeas36+""},
                { x: 790, y: 370, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 D（采样间隔15min）"+this.data.param2.xmeas37+""},
                { x: 790, y: 394, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 E（采样间隔15min）"+this.data.param2.xmeas38+""},
                { x: 790, y: 416, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 F（采样间隔15min）"+this.data.param2.xmeas39+""},
                { x: 790, y: 440, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 G（采样间隔15min）"+this.data.param2.xmeas40+""},
                { x: 790, y: 463, width: 15,height: 15, color: "rgba(255, 0, 0, 1)", data: "成分 H（采样间隔15min）"+this.data.param2.xmeas41+""},
            ]
            // this.drawRects();
            // this.detailChart1.setOption({dataset: {
            //         source: this.data
            //     },
            // });
        }, 2000);
    },
    methods: {
        drawRects() {
            const canvas = this.$refs.canvas;
            const ctx = canvas.getContext('2d');
            canvas.width = this.data.param1.offsetWidth;
            canvas.height = this.data.param1.offsetHeight;

            var img = new Image();
            img.src = require('@/assets/processFlowChart.png');
            img.onload = function(){
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            }
            ctx.globalCompositeOperation = 'destination-over';
            this.rects.forEach(rect => {
                ctx.fillStyle = "rgba(255, 0, 0, 0)";
                ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
            });
        },
        isPointInRect(x, y, rect) {
            return x > rect.x && x < rect.x + rect.width &&
                    y > rect.y && y < rect.y + rect.height;
        },
        handleCanvasMouseMove(event) {
            const canvas = this.$refs.canvas;
            const rectCanvas = canvas.getBoundingClientRect();
            const x = event.clientX - rectCanvas.left;
            const y = event.clientY - rectCanvas.top;

            let found = false;
            this.rects.forEach(rect => {
            if (this.isPointInRect(x, y, rect)) {
                found = true;
                this.popover.visible = true;
                this.popover.content = rect.data;
                // 计算弹出框的位置，使其在矩形的上方居中显示
                this.popover.style.left = `${rect.x + rect.width / 2}px`;
                this.popover.style.top = `${rect.y + rect.height / 2}px`;
                // this.popover.style.transform = 'translate(-50%, -100%)'; // 向上偏移
                this.popover.style.display = 'block';
            }
            });
            
            if (!found) {
            this.popover.visible = false;
            this.popover.style.display = 'none';
            }
        },
        handleCanvasMouseLeave() {
            this.popover.visible = false;
            this.popover.style.display = 'none';
        }
    },
};
</script>

<style scoped>
.canvas-container {
  position: relative;
}
.el-popover {
  pointer-events: none;
}
</style>